<script setup lang="ts">
import drawer from '@/components/drawer/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import dataTableTwo from '@/components/DataTable/index2.vue'
import type { ITableObj, ITableProp } from '@/type/interfaces'
const drawerRef = ref<InstanceType<typeof drawer>>()

const tableProp = ref<ITableProp>({
    width: '600px'
    ,actionWidth: '200px'
})
const tableObj = ref<ITableObj>({
    data: []
    ,columnConfig: [
        {
            prop: 'id'
            ,name: 'ID'
            ,width: 400
        }
        ,{
            prop: 'name'
            ,name: '名词'
        }
        ,{
            prop: 'publication'
            ,name: '出版'
        }
        ,{
            prop: 'bookName'
            ,name:'书名'
        }
    ]
})
const handleDelete = (index:number,row:any)=>{
    console.log('handleDelete',index,row.id);
}
const handleEdit = (index:number,row:any)=>{
    console.log('handleEdit',index,row);
}
const init = () => {
    if (tableObj.value.data && tableObj.value.data.length) {
        return;
    }
    for(let i = 0;i<2;i++){
        tableObj.value.data.push({
            id:i
            ,name:'name-'+i
            ,publication:'publication-'+i
            ,bookName: 'book-name-'+i
        })
    }
}
const open = () => {
    init()
    drawerRef.value?.open()
}
defineExpose({
    open
})
</script>
<template>
    <drawer :drawer="{ title: '表格',size:'85%' }" ref="drawerRef">
        <template #body>
            <data-table :table-obj="tableObj" :table-prop="tableProp"/>
            <div class="bg-[#a0cfff] leading-6 rounded-lg h-60px p-10px mb-5">
                nothing......
            </div>
            <data-table-two :table-obj="tableObj" :table-prop="tableProp">
                <template #action="{index,row}">
                    <el-button size="mini" @click="handleEdit(index, row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(index, row)">删除</el-button>
                </template>
            </data-table-two>
            <div class="bg-[#a0cfff] leading-6 rounded-lg h-60px p-10px mb-5">
                action支持slot
            </div>
            <div class="leading-6 mt-40px">
                <div>参考：</div>
                <div>https://cn.vuejs.org/</div>
                <div>http://element-plus.org/</div>
                <div>https://gitee.com/ziyuan_xcc/vue-form-table/tree/master/src/components/TreeGrid/vue</div>
                <div>https://gitee.com/suniv/vue-table/blob/master/src/components/Vuetable.vue</div>
                <div>https://gitee.com/Expertweblancer/vue-good-table/tree/master</div>
                <div>https://gitee.com/pzgz/el-search-table-pagination</div>
            </div>
        </template>
    </drawer>
</template>